<template>
  <div class="flex-1 flex flex-col bg-white/95 backdrop-blur-sm border-l border-gray-200/50">
    <!-- 编辑器工具栏 -->
    <div class="flex items-center justify-between p-3 border-b border-gray-200/50 bg-white/90 backdrop-blur-sm">
      <div class="flex items-center space-x-3">
        <!-- 语言选择 -->
        <select 
          v-model="selectedLanguage"
          class="px-3 py-1.5 text-sm border border-gray-200 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500"
          @change="handleLanguageChange"
        >
          <option value="python">Python</option>
          <option value="cpp">C++</option>
          <option value="java">Java</option>
          <option value="javascript">JavaScript</option>
        </select>

        <!-- 主题选择 -->
        <select 
          v-model="selectedTheme"
          class="px-3 py-1.5 text-sm border border-gray-200 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500"
          @change="handleThemeChange"
        >
          <option value="dracula">Dracula</option>
          <option value="monokai">Monokai</option>
          <option value="eclipse">Eclipse</option>
          <option value="solarized">Solarized</option>
        </select>
      </div>

      <div class="flex items-center space-x-2">
        <!-- 运行按钮 -->
        <Button 
          variant="success"
          size="sm"
          :loading="isRunning"
          :disabled="!props.modelValue.trim()"
          @click="handleRun"
        >
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          运行
        </Button>

        <!-- 提交按钮 -->
        <Button 
          variant="primary"
          size="sm"
          :loading="isSubmitting"
          :disabled="!props.modelValue.trim()"
          @click="handleSubmit"
        >
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
          </svg>
          提交
        </Button>

        <!-- 全屏按钮 -->
        <Button 
          :variant="isCodeFullscreen ? 'primary' : 'outline'"
          size="sm"
          @click="toggleCodeFullscreen"
          :title="isCodeFullscreen ? '退出全屏' : '代码全屏'"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path v-if="!isCodeFullscreen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
            <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.5 3.5M15 9h4.5M15 9V4.5M15 9l5.5-5.5M9 15v4.5M9 15H4.5M9 15l-5.5 5.5M15 15h4.5M15 15v4.5m0-4.5l5.5 5.5"></path>
          </svg>
        </Button>
      </div>
    </div>

    <!-- 代码编辑器 -->
    <div class="flex-1 relative">
      <div 
        ref="editorContainer" 
        class="h-full"
        :class="{ 'code-fullscreen': isCodeFullscreen }"
      ></div>
    </div>

    <!-- 输出区域 -->
    <div v-if="showOutput" class="border-t border-gray-200/50 bg-gray-50/50">
      <div class="p-3 border-b border-gray-200/50 bg-white/90 backdrop-blur-sm">
        <div class="flex items-center justify-between">
          <h3 class="text-sm font-semibold text-gray-700">运行结果</h3>
          <button 
            @click="showOutput = false"
            class="text-gray-400 hover:text-gray-600"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="p-3 max-h-48 overflow-y-auto">
        <div v-if="runOutput" class="text-sm font-mono text-gray-800 whitespace-pre-wrap">{{ runOutput }}</div>
        <div v-if="runError" class="text-sm font-mono text-red-600 whitespace-pre-wrap">{{ runError }}</div>
        <div v-if="!runOutput && !runError" class="text-sm text-gray-500">暂无输出</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import Button from '@/components/ui/Button.vue'
import CodeMirror from 'codemirror'

interface Props {
  modelValue: string
  language: string
  theme: string
  isCodeFullscreen: boolean
  isRunning: boolean
  isSubmitting: boolean
  runOutput: string
  runError: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
  'update:language': [language: string]
  'update:theme': [theme: string]
  run: []
  submit: []
  toggleFullscreen: []
}>()

const editorContainer = ref<HTMLElement>()
const showOutput = ref(false)
let editor: CodeMirror.Editor | null = null

const selectedLanguage = ref(props.language)
const selectedTheme = ref(props.theme)

// 监听输出变化
watch(() => [props.runOutput, props.runError], () => {
  if (props.runOutput || props.runError) {
    showOutput.value = true
  }
})

onMounted(() => {
  if (editorContainer.value) {
    editor = CodeMirror(editorContainer.value, {
      value: props.modelValue,
      mode: getLanguageMode(selectedLanguage.value),
      theme: selectedTheme.value,
      lineNumbers: true,
      lineWrapping: true,
      autoCloseBrackets: true,
      // matchBrackets: true, // 这个属性在新版本中可能不存在
      indentUnit: 4,
      tabSize: 4,
      extraKeys: {
        'Ctrl-Space': 'autocomplete',
        'F11': () => emit('toggleFullscreen'),
        'Esc': () => emit('toggleFullscreen')
      }
    })

    editor.on('change', () => {
      if (editor) {
        emit('update:modelValue', editor.getValue())
      }
    })
  }
})

onUnmounted(() => {
  if (editor) {
    // editor.toTextArea() // 这个方法在新版本中可能不存在
    editor = null
  }
})

const getLanguageMode = (language: string) => {
  const modes: Record<string, string> = {
    python: 'python',
    cpp: 'text/x-c++src',
    java: 'text/x-java',
    javascript: 'javascript'
  }
  return modes[language] || 'python'
}

const handleLanguageChange = () => {
  emit('update:language', selectedLanguage.value)
  if (editor) {
    editor.setOption('mode', getLanguageMode(selectedLanguage.value))
  }
}

const handleThemeChange = () => {
  emit('update:theme', selectedTheme.value)
  if (editor) {
    editor.setOption('theme', selectedTheme.value)
  }
}

const handleRun = () => {
  emit('run')
}

const handleSubmit = () => {
  emit('submit')
}

const toggleCodeFullscreen = () => {
  emit('toggleFullscreen')
}
</script>

<style scoped>
.code-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: white;
}
</style>

